<template>
  <div class="w h box-b over-h">
    <div class="w box-b over-h" style="height:calc(100% - 46px)">
      <router-view :userName="userName" :nowTime="nowTime"></router-view>
    </div>
    <van-tabbar v-model="active" @change="tabbarChange">
      <van-tabbar-item v-for="(item,i) in tabList" :key="i" v-bind="item"
        :class="{'c-p':active==i,'c-i':active!=i}">
        <span>{{item.label}}</span>
        <template #icon="props">
          <i :class="[item.icon]"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { tokenName } from '@/server/base';
export default {
  props: { nowTime: String },
  data() {
    return {
      // active: 0,
      tabList: [
        { label: 'Vant组件', icon: 'el-icon-s-claim', dot: false, path: '/layout/index/notice' },
        { label: '系统Api', icon: 'el-icon-s-home', dot: false, path: '/layout/index/main' },
        { label: '个人中心', icon: 'el-icon-s-custom', dot: false, path: '/layout/index/personal' },
      ],
    }
  },
  computed: {
    active: {
      get() {
        const routeName = this.$route.path;
        return this.tabList.findIndex(item => item.path == routeName)
      },
      set(val) {
        this.$router.push({ path: this.tabList[val].path });
      }
    },
    userName() {
      const userString = localStorage.getItem(tokenName);
      try {
        return JSON.parse(userString).username;
      } catch (e) {
        return ''
      }
    }
  },
  methods: {
    tabbarChange(values) {
      this.$router.push({ path: this.tabList[values].path });
    }
  },
  created() {
    this.active = 0
  }
}
</script>

<style lang="scss" scoped>
</style>
